import { StyleSheet } from 'react-native';

import { IS_WEB } from '@/utils';

import { spacing } from './spacing';

export const flex = {
  absolute: { position: 'absolute' },
  center: { alignItems: 'center', justifyContent: 'center' },
  fill: { bottom: 0, flex: 1, left: 0, right: 0, top: 0 },
  grow: { flexGrow: 1 },
  row: { flexDirection: 'row' },
  shrink: { flexShrink: 1 },
  wrap: { flexWrap: 'wrap' },
} as const;

const webContainer = {
  marginHorizontal: 'auto',
  maxWidth: '100%',
  width: 600,
} as const;

export const style = StyleSheet.create({
  scrollViewContent: {
    gap: spacing.md,
    paddingHorizontal: spacing.lg,
    paddingVertical: spacing.md,
    ...(IS_WEB && webContainer),
  },
  webContainer,
});
